<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="msapplication-tap-highlight" content="no" />
		<link rel="stylesheet" href="../../js/plugins/element-ui/element-ui.css">
		<link rel="stylesheet" href="../../css/common.css">
		<link rel="stylesheet" href="../../css/admin/index.css">
	</head>

	<body>
		
		 <div id="tableExample">
	<div class="haed-btn">
				<el-button type="success"  v-on:click="add('news/add.html')"><i class="el-icon-plus"></i> 添加</el-button>
			</div>
	 	
	 	 <table class="u-table" cellpadding="0" cellspacing="0">
			  <tr>
			    <th>序号</th>
			     <th>用户名</th>
			    <th>手机号</th>
			    <th>使用状态</th>
			    <th>上一次登录时间</th>
			     <th>操作</th>
			  </tr>
			  <tr v-cloak v-for="(item,index) in list">
			    <td>{{item.id}}</td>
			    <td><input v-model="item.userName" type="text" v-if="index==nowEditCol"><p v-else>{{item.userName}}</p></td>
			    <td><input v-model="item.mobile" type="text" v-if="index==nowEditCol"><p v-else>{{item.mobile}}</p></td>
			    <td>
			    <p v-if='item.isUse'>使用中</p>
			    <p v-else class="red">停用中</p>
			    </td> 
			    <td>{{item.lastactivitydate}}</td>
			    <td>
			    	  <a href="javascript:void(0);" v-on:click="startEdit(index)" v-if="index!=nowEditCol">编辑</a>
					  <a href="javascript:void(0);" v-on:click="cancelEdit" v-if="index==nowEditCol">取消</a>
					  <a href="javascript:void(0);" v-on:click="sureEdit(index)" v-if="index==nowEditCol">确认</a>
					  <a class="red" href="javascript:void(0);" v-on:click="remove(index)">删除</a>
			    </td>
			  </tr>
			</table>
			   <div class="page-bar">
				  <ul>
				    <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
				    <li v-if="cur==1"><a class="banclick">上一页</a></li>
				    <li v-if="cur>=num-1"><a v-on:click="btnClick(1)">1</a></li>
				    <li v-if="cur>=num"><a>...</a></li>
				    <li v-sele v-for="index in indexs" v-bind:class="{'active': cur == index}">
				      <a v-on:click="btnClick(index)">{{ index }}</a>
				    </li>
				    <li v-if="cur>=num && cur<=all-num"><a>....</a></li>
				    <li v-if="cur>=num && cur<=all-num+2"><a v-on:click="btnClick(all)">{{all}}</a></li>
				    <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
				    <li v-if="cur == all"><a class="banclick">下一页</a></li>
				    <li><a>共<i>{{all}}</i>页</a></li>
				  </ul>
			 </div>
	 </div>
	  
		
		
		<script type="text/javascript" src="../../js/plugins/vue/vue.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/element-ui/element-ui.js"></script>
		<script type="text/javascript" src="../../js/plugins/jQuery/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/vue-router/vue-router.min.js"></script>
		<script type="text/javascript" src="../../js/util/util.js"></script>
		<script type="text/javascript" src="../../js/admin/main.js"></script>
		<script>
	  	 var VM =new Vue({
				  el: '#tableExample',
				  data: {
				  	all:100, //总页数
			        cur: 1,//当前页码
			        row:100,//显示多条数据
			        num:5, //显示多少页码
			        nowEditCol:-1,//当前编辑的行
                    editStatus:false,//当前是否在编辑状态
				    list:[
 					    {
					        "id": "1",
					        "userName": "panfu",
					        "mobile": "18285533801",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					     {
					        "id": "2",
					        "userName": "panfu01",
					        "mobile": "18285533802",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					     {
					        "id": "3",
					        "userName": "panfu03",
					        "mobile": "18285533803",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					    {
					        "id": "4",
					        "userName": "panfu04",
					        "mobile": "18285533808",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					     {
					        "id": "5",
					        "userName": "panfu",
					        "mobile": "18285533808",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					      {
					        "id": "6",
					        "userName": "panfu",
					        "mobile": "18285533808",
					        "isUse":false,
					        "lastactivitydate": "2017-06-09"
					    },
					    {
					        "id": "7",
					        "userName": "panfu",
					        "mobile": "18285533808",
					        "isUse":true,
					        "lastactivitydate": "2017-06-09"
					    },
					  {
					        "id": "8",
					        "userName": "panfu",
					        "mobile": "18285533808",
					        "isUse":false,
					        "lastactivitydate": "2017-06-09"
					    },
					    {
					        "id": "9",
					        "userName": "panfu",
					        "mobile": "18285533808",
					        "isUse":false,
					        "lastactivitydate": "2017-06-09"
					    },
					     {
					        "id": "10",
					        "userName": "panfu",
					        "mobile": "18285533808",
					        "isUse":false,
					        "lastactivitydate": "2017-06-09"
					    },
					],
				    oldData:[],
				    newlist:[] 
				  },
				  watch: { //组件交互
				    cur: function(oldValue , newValue){
				       //console.log(oldValue+"====="+newValue);
				       // console.log(arguments);
				    }
				  },
				  methods: { //事件处理
			           btnClick: function(data){//页码点击事件
					      if(data != this.cur){
					        this.cur = data 
					        this.$options.methods.__ajax.bind(this)(this.cur); //调用AJAX
					      }
					     
					    },
					    pageClick: function(){ //点击上一页下一页
					      console.log('现在在'+this.cur+'页');
					      this.$options.methods.__ajax.bind(this)(this.cur); //调用AJAX
					    },
					    __ajax:function(index){ //
					    	var slfe=this;
					    	$.ajax({
					    		type:"get",
					    		data:{"page":index},
					    		url:"../data/json/table.json",
					    		async:true,
					    		success:function(data){
					    		 var data = data.splice(1,2) 
					    			slfe.list=data;
					    			//slfe.list.$set(slfe.$data, "list", data);//强制渲染
                                    //slfe.$forceUpdate(); //强制渲染
					    		},
					    		error:function(data){
					    			 //console.log(data)
					    		}
				    	      });
					    },
					    remove:function(index){ //删除
					    	 this.list.splice(index,1);
					    },
					    add:function(){ //添加
					    	//this.list.push(this.newlist);
					    	alert("sss")
					    },
					    startEdit:function(index){ //启动编辑
					    	this.oldData=JSON.parse(JSON.stringify(this.list)) //保存老的对象，需要深度复制
					    	this.nowEditCol=index;
					    },
					    sureEdit:function(){ //确定编辑修改
					    	this.nowEditCol=-1;
					    },
					    cancelEdit:function(index){ //取消编辑
					    	this.list=this.oldData;
					    	this.nowEditCol=-1;
					    }
				  },
				  computed:{
				  	indexs: function(){ //分页
				     var left = 1;
				     var right = this.all;
				     var ar = [];
				     if(this.all>= this.num){
				      if(this.cur > 3 && this.cur < this.all-2){
				          left = this.cur - 2
				          right = this.cur + 2
				      }else{
				        if(this.cur<=3){
				          left = 1
				          right = this.num
				        }else{
				          right = this.all
				          left = this.all -4
				        }
				      }
				     }
				    while (left <= right){
				      ar.push(left)
				      left ++
				    }
				    return ar
				    }
				  },
				  mounted:function(){ //加载完成后执行
				  	 var slfe=this;
				  	 
				  
				  }
				})
		    
			
</script>
		
		
	</body>

</html>